<template>
  <div>
    <div class="admin-top">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/ums/admin' }"
          >权限</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/ums/admin' }"
          ><a href="#">用户列表</a></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="admin-suos">
      <div class="admin-suos-title">
        <div>
          <el-icon><Search /></el-icon>筛选搜索
        </div>
        <div>
          <el-button>重置</el-button>
          <el-button type="primary" @click="searchFn">查询搜索</el-button>
        </div>
      </div>
      <div class="admin-suos-input">
        <span> 账号/姓名：</span>
        <el-input
          class="w-50 m-2"
          size="large"
          placeholder="请输入账号、密码"
          v-model="formParams.keyword"
        />
      </div>
    </div>
    <div class="admin-add">
      <div>数据列表</div>

      <!-- v-if="userStore.权限数组.includes("xxx")" -->
      <el-button type="primary" @click="addFn" v-permission="'addUser'"
        >添加用户</el-button
      >
    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="编号" width="180" />
        <el-table-column prop="username" label="账号" width="180" />
        <el-table-column prop="nickName" label="姓名" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column label="添加时间">
          <template #default="scope">
            <div>
              {{ dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="最后登陆">
          <template #default="{ row }">
            <div>
              {{
                row.loginTime
                  ? dayjs(row.loginTime).format("YYYY-MM-DD HH:mm:ss")
                  : ""
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="是否启用">
          <template #default="scope">
            <div>
              <el-switch
                @change="RadioGroupFn(scope.row)"
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
              />
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="editFn(row.id)"
              >编辑用户</el-button
            >
            <el-button link type="primary" size="small" @click="fepeFn(row.id)"
              >分配角色</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        v-model:current-page="paginationParams.currentPage"
        v-model:page-size="paginationParams.pageSize"
        :page-sizes="[5, 10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginationParams.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      {{ editId }}
      <!-- 模态框 -->
      <Edit
        :editId="editId"
        :dialogVisible="dialogVisible"
        @cancel="cancelFn"
        @confirm="confirmFn"
      />
      <Bianji
        :bjId="bjId"
        :centeVisible="centeVisible"
        @cancels="cancelFns"
        @confirms="confirmFns"
      />
    </div>
  </div>
  s
</template>

<script setup lang="ts">
import Edit from "./adminEdit.vue";
import * as http from "@/request/http";
import { dayjs } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { useTable } from "@/hooks/component/useTable";
import { reactive, ref } from "vue";
import Bianji from "./adminBj.vue";
const editId = ref(0);
const bjId = ref(0);

/**
  const tableData: Ref<IListModal[]> = ref([]);
 // 分页参数
const paginationParams = reactive({
  currentPage: 1, //页码数
  pageSize: 5, //显示的数量
  total: 1, //总条数
});
// 封装函数请求
const qreuseList = () => {
  http.admin
    .adminList({
      pageNum: paginationParams.currentPage,
      pageSize: paginationParams.pageSize,
    })
    .then((res) => {
      console.log(res);
      tableData.value = res.data.list;
      paginationParams.total = res.data.total; //总条数
    });
};
qreuseList();
const handleSizeChange = (val: number) => {
  console.log("SizeChange", val);
  qreuseList();
};
const handleCurrentChange = (val: number) => {
  console.log("CurrentChange", val);
  qreuseList();
};
 */
// 搜索框的值
let formParams = reactive<IadminListParams>({
  keyword: "",
});

// 封装
//vue2 mixins 复用多个组件公用的数据方法等逻辑
//vue3:封装一个useTable (获取表格数据、分页数据)
const {
  qreuseList,
  tableData,
  paginationParams,
  handleSizeChange,
  handleCurrentChange,
} = useTable(http.admin.adminList, formParams);

// 是否启用
let RadioGroupFn = (row: IListModal) => {
  // console.log(tableData);
  console.log(row);
  http.admin.updateStatus(row.id, row.status).then((res) => {
    console.log(res);
  });
};

// 模糊查询方法
function searchFn() {
  console.log("搜索功能", formParams.keyword);
  // 传递formParams.keyword参数重新请求接口 获取新的数据
  qreuseList();
}

let dialogVisible = ref(false);
let centeVisible = ref(false);
// 添加用户
function addFn() {
  dialogVisible.value = true;
  editId.value = 0;
}

// 编辑用户
function editFn(id: number) {
  dialogVisible.value = true;
  //  将作用域插槽的id赋过来
  editId.value = id;
  console.log(id);
}
// 分配用户
function fepeFn(id: number) {
  centeVisible.value = true;
  bjId.value = id;
}

//取消
function cancelFn() {
  dialogVisible.value = false;
  // editId.value = 0;
}
// 确定
function confirmFn() {
  dialogVisible.value = false;
  // editId.value = 0;

  //当编辑页面 点击了确认后(新增， 修改)
  //都可能影响数据 需要重新调用一次查询方法，列表数据就更新。
  qreuseList();
}

//分类取消
function cancelFns() {
  centeVisible.value = false;
}
// 分类确定
function confirmFns() {
  centeVisible.value = false;
}
</script>

<style lang="less" scoped>
:deep(.el-main) {
  --el-main-padding: 0px;
}
.admin-top {
  height: 30px;
  border-bottom: 1px solid #cbcbcb;
}
.admin-suos {
  margin: 20px auto;
  width: 100%;
  height: 140px;
  box-shadow: 0px 0px 8px rgb(232, 232, 232);
  .admin-suos-title {
    display: flex;
    justify-content: space-between;
    padding: 20px;
  }
  .admin-suos-input {
    padding: 0px 70px;
    display: flex;
    flex-direction: row;
    align-items: center;
    :deep(.el-input) {
      width: 300px;
    }
    :deep(.el-input__inner) {
      width: 300px;
    }
  }
}

.admin-add {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  height: 70px;
  margin: 20px auto;
  padding: 0px 20px;
}
</style>
